<template>  
    <div id="app">  
      <el-icon  @click="toggleLength" :size="size" :color="color">
      <Edit />
    </el-icon>
      <transition name="slide">  
        <div v-if="show" class="box">
            <el-select
          v-model="value"
          filterable
          remote
          placeholder="Select"
          class="header-search-select"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </div>  
      </transition>  
    </div>  
  </template>  
    
  <script>  
  import { ref } from 'vue';  
    
  export default {  
    setup() {  
      const show = ref(false);  
    
      const toggleLength = () => {  
        show.value = !show.value;  
      };  
    
      return {  
        show,  
        toggleLength,  
      };  
    },  
  };  
  </script>  
    
  <style>  
  #app {  
    display: flex;
    justify-content: center;
  }  
    
  button {  
    padding: 10px 20px;  
  }  
    
  .box {  
    width: 300px;  
    height: 100px;  
    transition: width 0.1s; /* 添加过渡效果 */  
  }  
    
  /* 使用 @keyframes 定义过渡效果 */  
  @keyframes slide {  
    0% { width: 0px; } /* 打开时宽度从0开始 */  
    100% { width: 300px; } /* 打开时宽度变为300 */  
  }  
  @keyframes slideReverse {  
    0% { width: 300px; } /* 关闭时宽度从300开始 */  
    100% { width: 0px; } /* 关闭时宽度变为0 */  
  }  
    
  .slide-enter-active, .slide-leave-active {  
    animation: slide 0.2s forwards; /* 应用定义的动画 */  
  }  
  .slide-leave-active {  
    animation-direction: reverse; /* 设置动画反向播放 */  
  }  
  </style>
  